<template>
  <div class="app-container">
    <div class="msgAdd">
      <el-form
        ref="pushData"
        v-loading="listLoading"
        status-icon
        class="demo-ruleForm"
        label-width="240px"
        :model="pushData"
        :rules="rules"
      >
        <el-form-item>
          <span><h3>消息内容</h3></span>
        </el-form-item>
        <el-form-item label="发送规则：">
          <el-radio v-model="pushData.sendRule" label="1">立即发送</el-radio>
          <el-radio v-model="pushData.sendRule" label="2">定时发送</el-radio>
        </el-form-item>
        <el-form-item label="接收人员：" prop="messageName">
          <!-- <el-input v-model="pushData.messageName" autocomplete="off" /> -->
          <el-input type="textarea" :rows="8" v-model="pushData.messageName"  :disabled="true" />
        </el-form-item>
        <el-form-item label="消息标题：" prop="informationTitle">
          <el-input v-model="pushData.informationTitle" autocomplete="off" />
        </el-form-item>
        <el-form-item label="消息内容：" prop="informationContent">
          <el-input v-model="pushData.informationContent" :rows="7" />
        </el-form-item>
        <el-form-item>
          <el-button type="info" size="mini" @click="submitForm('pushData')">提交</el-button>
          <el-button size="mini" @click="checkPersonList()">选择人员</el-button>
          <el-button size="mini" @click="cancelForm()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 弹窗部分 -->
    <el-dialog
      class="setPerson"
      title="选择员工"
      :visible.sync="showSetPerson"
      width="820px"
      @opened="openDia()"
      @closed="closeDia()"
      @close="showIds()"
    >
      <!-- 名单部分 -->
      <div id="checkedList" class="checkedList">
        <div class="checkedList_left">已选择</div>
        <ul class="checkedList_right">
          <li v-for="(item, index) in namelist" :key="index">
            {{ item.name }}
          </li>
        </ul>
        <div class="sureBut">
          <el-button type="primary" size="mini" @click="sureBut">确定</el-button>
        </div>
      </div>
      <!-- 查询部分 -->
      <div class="searchGrop">
        <div class="searchQuery">
          <el-row>
            <el-col :span="8">
              <div class="itemSearch">
                <label>编号：</label>
                <el-input v-model="query.staffNumber" clearable placeholder="请输入员工编号" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="itemSearch">
                <label>姓名：</label>
                <el-input v-model="query.staffName" clearable placeholder="请输入员工姓名" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="itemSearch">
                <label>手机号码：</label>
                <el-input v-model="query.phoneNumber" clearable placeholder="请输入手机号码" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="itemSearch">
                <label>组织机构：</label>
                <el-input v-model="query.Organization" clearable placeholder="请输入组织机构" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="itemSearch">
                <label>状态：</label>
                <el-select v-model="query.staffState" placeholder="请选择员工部门" clearable>
                  <el-option label="在职" value="1" />
                  <el-option label="离职" value="2" />
                </el-select>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="itemSearch">
                <label>员工部门：</label>
                <el-select v-model="query.name" placeholder="请选择员工部门" clearable>
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="btnGroup">
          <el-button class="redBtn" type="danger" size="mini" @click="SelectWorker">查询</el-button>
        </div>
      </div>
      <div class="personTable">
        <!--selection-change  select -->
        <el-table
          ref="multipleTable"
          height="300"
          row-key="id"
          border
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @select="handleSelectionChange"
        >
          <el-table-column type="selection" :reserve-selection="true" align="center" width="55" />
          <el-table-column label="员工编号">
            <template slot-scope="scope">{{ scope.row.staffNumber }}</template>
          </el-table-column>
          <el-table-column prop="staffName" label="姓名" />
          <el-table-column prop="phoneNumber" label="手机号码" />
          <el-table-column prop="name" label="部门" show-overflow-tooltip />
          <el-table-column label="员工状态" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.staffState | workStatus }}
            </template>
          </el-table-column>
          <el-table-column label="组织机构" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.enterpriseVo.enterpriseName }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // sendMessage, getPersonsList, getALLdata, submitMessage
  import { getEchoData, getUserList, upSubmitMessage, getOrgList } from '@/api/message/index'
  export default {
    filters: {
      workStatus(val) {
        if (val === 1) {
          return '在职'
        } else {
          return '离职'
        }
      },
      userStatus(val) {
        if (val === 1) {
          return '启用'
        } else {
          return '禁用'
        }
      },
    },
    data() {
      return {
        options: [],
        namelist: [{ name: '暂无' }],
        formArry: [], // 这是输入框的数组显示的名字
        // 发送消息
        pushData: {
          messageName: '', // 集中名字,做展示用，提交的时候清空nouse
          sendRule: '1',
          receptionStaffIds: '', // 集中ids,做字符串，用','分割
          informationTitle: '',
          informationContent: '',
        },
        listLoading: true,
        // 人员筛选
        query: {
          staffNumber: '',
          staffName: '',
          phoneNumber: '',
          enterprisename: '', // 组织机构
          staffState: '',
          name: '', // 员工部门
        },
        showSetPerson: false,
        isShow: true,
        subSuccess: false,
        isShowAdd: false,
        showItem: true,
        tableData: [],
        multipleSelection: [],
        rules: {
          sendRules: [{ required: true, message: '请选择发送方式', trigger: 'blur' }],
          messageName: [{ required: true, message: '请选择接收人员', trigger: 'blur' }],
          informationTitle: [{ required: true, message: '请输入消息标题', trigger: 'blur' }],
          informationContent: [{ required: true, message: '请输入消息内容', trigger: 'blur' }],
        },
        inputStr: '',
        ids: '',
        alreadyList: [],
        alreadCheck: [], // 默认一进来就被加载需要被选中的项目
      }
    },
    computed: {},
    created() {
      // 获取当前资讯的数据
      this.GetBackData()
      this.getOrg()
    },
    mounted() {},
    methods: {
      getOrg() {
        getOrgList({ paramVo: { keyword: '', pageNo: 0, pageSize: 0 } }).then(response => {
          this.options = response
        })
      },
      // 获取当前资讯的数据
      async GetBackData() {
        var staffFileVo = {
          enterpriseVo: {
            enterpriseName: this.query.enterpriseName,
          },
          orgVo: {
            name: this.query.name,
          },
          staffNumber: this.query.staffNumber,
          staffName: this.query.staffName,
          phoneNumber: this.query.phoneNumber,
          staffState: this.query.staffState,
        }
        // 获取员工列表部分
        const userList = await getUserList({
          staffFileVo,
          pageSize: 10,
          pageNO: 1,
        })
        console.log(userList)
        this.tableData = userList.records
        // add over
        const getData = await getEchoData({ informationId: this.$route.query.id })
        console.log(getData)
        getData.sendRule = String(getData.sendRule)
        this.pushData = getData
        this.listLoading = false
        this.ids = getData.receptionStaffIds
        console.log(this.ids)
        let idsArr = this.ids.split(',')
        // 过滤，去掉空的值
        idsArr = idsArr.filter(value => {
          if (value.length > 0) {
            return value
          }
        })
        this.pushData.messageName = ''
        this.alreadCheck = [] // 这是一进来就会被选中的部分
        this.namelist = []
        this.tableData.forEach(el => {
          const isIn = idsArr.indexOf(el.id)
          if (isIn > -1) {
            if (el.staffName !== '') {
              this.namelist.push({ name: el.staffName })
              this.alreadCheck.push(el)
              this.pushData.messageName = this.pushData.messageName + el.staffName + '，'
              this.pushData.receptionStaffIds = this.pushData.receptionStaffIds + el.id + ','
            }
          }
        })
      },
      // allchange(all) {
      //   console.log(all)
      // },
      handleSelectionChange(arrList) {
        if (this.arrList === []) {
          this.namelist.push({ name: '暂无' })
        }
        const newArr = []
        if (arrList.length > 0) {
          this.alreadCheck = []
          this.namelist = []
          this.pushData.receptionStaffIds = ''
          this.pushData.messageName = ''
          arrList.forEach(el => {
            newArr.push(el.id)
            this.namelist.push({ name: el.staffName })
            this.alreadCheck.push(el)
            this.pushData.messageName = this.pushData.messageName + el.staffName + '，'
            this.pushData.receptionStaffIds = this.pushData.receptionStaffIds + el.id + ','
          })
        }
      },
      sureBut() {
        this.showSetPerson = false
        console.log('namestr', this.pushData.messageName)
        console.log('ids', this.pushData.receptionStaffIds)
      },
      showIds() {},
      // 点击展示员工列表
      checkPersonList() {
        this.showSetPerson = true
      },
      openDia() {
        if (this.alreadCheck.length > 0) {
          this.alreadCheck.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        }
      },
      closeDia() {
        if (this.alreadCheck.length > 0) {
          this.alreadCheck.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        }
      },
      SelectWorker() {
        this.getTableDataList()
        this.query = this.$options.data().query
      },
      // 提交添加消息
      submitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            delete this.pushData.messageName
            const upData = {
              id: this.$route.query.id,
              ...this.pushData,
              // information: {}
            }
            upSubmitMessage(upData).then(response => {
              if (response) {
                this.$message({
                  message: '消息修改成功！',
                  type: 'success',
                })
              } else {
                this.$message({
                  message: '消息修改失败！',
                  type: 'waring',
                })
              }
              this.$router.push('/messageNotify/index')
            })
          } else {
            return false
          }
        })
      },
      // 取消表单提交
      cancelForm() {
        this.showSetPerson = false
        this.$router.push('/messageNotify/index')
      },
    },
  }
</script>
<style lang="scss">
  .setPerson {
    .checkedList {
      display: flex;
      width: 100%;
      min-height: 42px;
      line-height: 42px;
      justify-content: center;
      align-items: center;

      .sureBut {
        margin-left: 10px;
      }

      .checkedList_left {
        width: 7%;
      }

      .checkedList_right {
        width: 93%;
        padding: 5px;
        border: 1px #ccc solid;
        border-radius: 4px;

        li {
          float: left;
          min-width: 50px;
          padding: 0;
          margin: 0 5px;
          line-height: 22px;
          text-align: center;
          list-style: none;
        }
      }
    }

    .el-dialog {
      border-radius: 6px;
    }

    .el-dialog__body {
      padding: 10px 20px 25px;
    }

    .el-dialog__header {
      padding: 7px 15px;
      background: #f8f8f8;
      border-radius: 6px;

      .el-dialog__title {
        font-size: 14px;
        font-weight: 700;
        color: #666;
      }

      .el-dialog__headerbtn {
        top: 7px;
        right: 15px;
      }
    }

    .searchGrop {
      display: flex;
      width: 100%;
      padding-top: 20px;
      border-top: 1px #aaa dashed;
      justify-content: flex-start;

      .searchQuery {
        width: 89%;
      }

      .btnGroup {
        width: 10%;
        text-align: right;

        .redBtn {
          background: #d12f1f;
        }

        .redBtn:hover {
          background: #e34f2f;
        }
      }
    }

    .personTable {
      width: 100%;
      margin-top: 15px;

      .el-table th {
        padding: 7px 0;
      }

      .el-table td {
        padding: 7px 0;
      }
    }

    .page {
      width: 100%;
      margin-top: 10px;
    }
  }
</style>
<style lang="scss" scoped>
  .msgAdd {
    width: 650px;
    min-height: 76vh;
    border: 1px solid #aeaeae;
    border-radius: 6px;
  }

  .messageTable {
    position: relative;
    height: 100%;
    padding-top: 15px;
    padding-left: 10px;
    background: #fff;
  }

  .addBox {
    width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .addNews {
    min-width: 92px;
    font-size: 14px;
    color: #d23f1f;
    text-align: center;
    background: none;
    border: 1px solid #d12f1f;
  }

  b {
    margin-right: 8px;
    font-size: 16px;
    font-weight: 800;
  }

  .notice {
    padding: 5px 25px 15px;
    margin: 0 0 25px 0;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
  }

  .notice h4 {
    font-weight: 700;
    color: #666;
  }

  .notice span {
    font-size: 14px;
    color: #666;
  }

  .el-input {
    position: relative;
    display: inline-block;
    width: 300px;
  }

  .el-textarea {
    position: relative;
    display: inline-block;
    width: 300px;
    vertical-align: bottom;
  }

  .el-dropdown-link {
    color: #f56c6c;
    cursor: pointer;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .btngroup {
    align-content: flex-end;
    display: flex;
    margin: 0 4px;
    text-align: center;
  }

  label {
    display: inline-block;
    margin-bottom: 10px;
    font-weight: normal;
    line-height: 32px;
    text-align: right;
  }

  .itemSearch {
    display: flex;
    justify-content: flex-start;

    label {
      width: 34%;
      font-size: 13px;
      line-height: 34px;
      text-align: right;
    }

    .el-input {
      width: 70%;
      overflow: hidden;
    }

    .el-select {
      width: 72%;
      overflow: hidden;
    }
  }

  .subSuc {
    text-align: center;
  }

  .el-pagination.is-background .el-pager li:not(.disabled).active {
    padding-right: 20px;
    background: #f56c6c;
  }
</style>
